import React from 'react';
import {List, Calendar} from 'antd-mobile';
import zhCN from 'antd-mobile/lib/calendar/locale/zh_CN';
import CostStatisticsStyle from '../assets/css/CostStatistics.module.css'
import {AnalyseCount} from "../http/Request";
import {dateFormat} from '../utils/filters'

const end = new Date();
const start = end - 2592000000;

export default class CostStatistics extends React.Component {
    originbodyScrollY = document.getElementsByTagName('body')[0].style.overflowY;

    constructor(props) {
        super(props);

        this.state = {
            searchValue: '',
            startTime: start,
            endTime: end,
            isLoading: true,
            hasMore: false,
            info: {},
            noList: false,

            zh: '选择日期区间',
            show: false,
            config: {},
        };
    }

    componentDidMount() {
        let params = {
            "startTime": dateFormat.getNowFormatDate(this.state.startTime),
            "endTime": dateFormat.getNowFormatDate(this.state.endTime),
        };
        this.getList(params);
    };

    /**
     * 获取列表
     * */
    getList(params) {
        AnalyseCount(params).then(res => {
            this.setState({
                info: res.body
            })
        }).catch(err => {

        });
    };

    renderBtn(config = {}) {
        config.locale = zhCN;
        return (
                <List.Item arrow="horizontal"
                           onClick={() => {
                               document.getElementsByTagName('body')[0].style.overflowY = 'hidden';
                               this.setState({
                                   show: true,
                                   config,
                               });
                           }}
                >
                    {this.state.zh}
                </List.Item>
        );
    }

    renderContent() {
        return (
                <div className={CostStatisticsStyle.CostStatisticsContent}>
                    <div className={CostStatisticsStyle.box}>
                        <p><span className={CostStatisticsStyle.label}>饲料花销:</span><span className={CostStatisticsStyle.textVal}>{this.state.info['fodderRegisterPrice']}</span> 元</p>
                        <p><span className={CostStatisticsStyle.label}>出栏花销:</span><span className={CostStatisticsStyle.textVal}>{this.state.info['leavePrice']}</span> 元</p>
                        <p><span className={CostStatisticsStyle.label}>疾病花销:</span><span className={CostStatisticsStyle.textVal}>{this.state.info['sicknessInfoPrice']}</span> 元</p>
                        <p><span className={CostStatisticsStyle.label}>养殖场花销:</span><span className={CostStatisticsStyle.textVal}>{this.state.info['zoonFarmPrice']}</span> 元</p>
                        <p><span className={CostStatisticsStyle.label}>入栏花销:</span><span className={CostStatisticsStyle.textVal}>{this.state.info['enterPrice']}</span> 元</p>
                    </div>
                </div>
        )

    }

    onSelectHasDisableDate = (dates) => {
        console.warn('onSelectHasDisableDate', dates);
    };

    onConfirm = (startTime, endTime) => {
        console.log(startTime, endTime, '确认');
        document.getElementsByTagName('body')[0].style.overflowY = this.originbodyScrollY;
        this.setState({
            show: false,
        });
        let params = {
            "startTime": dateFormat.getNowFormatDate(startTime),
            "endTime": dateFormat.getNowFormatDate(endTime),
        };
        this.getList(params);
    };

    onCancel = () => {
        document.getElementsByTagName('body')[0].style.overflowY = this.originbodyScrollY;
        this.setState({
            show: false,
            startTime: undefined,
            endTime: undefined,
        });
    };


    render() {
        return (
                <div className={CostStatisticsStyle.CostStatisticsContainer}>
                    <div className={CostStatisticsStyle.SearchBarStyle}>
                        {this.renderBtn({
                            showShortcut: true,
                        })}
                    </div>

                    {this.renderContent()}
                    <Calendar
                            {...this.state.config}
                            visible={this.state.show}
                            onCancel={this.onCancel}
                            onConfirm={this.onConfirm}
                            onSelectHasDisableDate={this.onSelectHasDisableDate}
                    />
                </div>
        )
    }
}
